
<template>
  <div class="popupMask">
    <div class="popupPenal" style="width:100%;height:100%;">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          添加采样点
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent" >
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  客户
                </div>
                <div class="inlineblock verticalmiddle informationItem" id="renwujiajiancedian">
                    <el-input placeholder="默认当前任务的客户" disabled size="mini"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  监测区域
                </div>
                <div class="inlineblock verticalmiddle informationItem" id="renwujiajiancedian">
                    <el-select v-model="jiancequyuValue" placeholder="请选择" size="mini" clearable>
                        <el-option
                          v-for="item in jiancequyu"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  监测点类型
                </div>
                <div class="inlineblock verticalmiddle informationItem" id="renwujiajiancedian">
                    <el-select v-model="jiancedianleixingValue" placeholder="请选择" size="mini" clearable>
                        <el-option
                          v-for="item in jiancedianleixing"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                    点位名称
                </div>
                <div class="inlineblock verticalmiddle informationItem" id="renwujiajiancedian">
                    <el-input v-model="newpointname" placeholder="输入点位名称" size="mini"></el-input>
              </div>
            </div>
          </div>
      </div>
      <div class=" penalFooter">
              <el-button class="penalButton" type="primary" size="mini" v-on:click="close">确定</el-button>
              <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  data () {
    let that=this;
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `监测点 ${ i }`,
            px:false,
            jb:false,
          });
        }
        return data;
      };
    return {
              yesornoValue:'1',
              enableStatusValue:'1',
              caiyangData:[
                          {
                            rongqileixing:'',
                            pingshu:'',
                          }
              ],
              xianchangrenDataValue:'',
              popupPenalStyle:{
                // height:(window.innerHeight - 500)+'px',
                'min-height':(window.innerHeight - 140)+'px',
                'top': '20px',
                'transform': 'translate(-50%, 0%)'
              },
              penalContentStyle:{
                // 'height':(window.innerHeight - 250)+'px'
              },
              //监测点列表
              monitoringPoints:generateData(),
              //已选监测点 key数组
              monitoringPointsValue:[1,4],
              jiancequyu:[
                            {
                              value:'001',
                              label:'区域一',
                            },
                            {
                              value:'002',
                              label:'区域二',
                            },
                            {
                              value:'003',
                              label:'区域三',
                            },
                            {
                              value:'004',
                              label:'区域四',
                            }
              ],
              jiancequyuValue:'',
              jiancedianleixing:[
                              {
                                value:'001',
                                label:'管网水',
                              },
                              {
                                value:'002',
                                label:'地表水',
                              },
                              {
                                value:'003',
                                label:'污水',
                              },
                              {
                                value:'004',
                                label:'管网末梢',
                              }
              ],
              jiancedianleixingValue:'',
              newpointname:'',
      }
      
  },
  computed:{
    ...mapState(['enableStatus','tableHeightA','yesorno','enableStatus','bottleType','caiyangrenData','xianchangrenData']),
  },
  props:['newOrEdit','canEdit'],
  methods:{
    close(){
      this.$parent.addnewpointShow = false;
      this.$parent.monitoringPoints.push({
        key:(this.$parent.monitoringPoints.length+1),
        label:this.newpointname,
        px:false,
        jb:false
      })
    },
    shifouzaiyoubian(option){
      var arrrr = this.monitoringPointsValue;
      var flag = 'hide';
      for( var i = 0 ; i < arrrr.length ; i++ ){
        if( option.key ==  arrrr[i] ){
          flag = '';
          return
        }
      };
      return flag;
    },
    tianjiaxianchangqc(option,event){
      event.preventDefault()
      option.px = !option.px
    },
    tianjiaxcjiabiaoqc(option,event){
      event.preventDefault()
      option.jb = !option.jb
    },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
.xuanzeqc{
  border:1px solid #666;
  border-radius: 2px;
}
.xuanzeqc.tianjiaqc{
  background-image: url('../../../../assets/img/checked2.png');
  background-size: 100%;
}
.popupPenal{
    /*background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);*/
    /*min-width: 60%;
    min-height: 60%;*/
    width: 710px;
    /*height: 531px;
    border-radius: 2px;*/
}
</style>
